<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Bustling</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
<!-- CSS -->
<link href="../bower_components/normalize-less/normalize.less" rel="stylesheet/less"/>
<link href='http://fonts.googleapis.com/css?family=Slackey' rel='stylesheet' type='text/css'>
<link rel="stylesheet/less" type="text/css" href="grid_demo.less">
<!-- CSS -->
<style type="text/css">
</style>

<body>

<article class="grid">

<h1 class="logo-font">Bustling</h1>

<h2>12 栅格 等分</h2>

<section class="row">

    <div class="col-1-1">
        <div class="wrap-col">
            col-1-1
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-2">
        <div class="wrap-col">
            col-1-2
        </div>
    </div>
    <div class="col-1-2">
        <div class="wrap-col">
            col-1-2
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-3">
        <div class="wrap-col">
            col-1-3
        </div>
    </div>
    <div class="col-1-3">
        <div class="wrap-col">
            col-1-3
        </div>
    </div>
    <div class="col-1-3">
        <div class="wrap-col">
            col-1-3
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-4">
        <div class="wrap-col">
            col-1-4
        </div>
    </div>
    <div class="col-1-4">
        <div class="wrap-col">
            col-1-4
        </div>
    </div>
    <div class="col-1-4">
        <div class="wrap-col">
            col-1-4
        </div>
    </div>
    <div class="col-1-4">
        <div class="wrap-col">
            col-1-4
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-5">
        <div class="wrap-col">
            col-1-5
        </div>
    </div>
    <div class="col-1-5">
        <div class="wrap-col">
            col-1-5
        </div>
    </div>
    <div class="col-1-5">
        <div class="wrap-col">
            col-1-5
        </div>
    </div>
    <div class="col-1-5">
        <div class="wrap-col">
            col-1-5
        </div>
    </div>
    <div class="col-1-5">
        <div class="wrap-col">
            col-1-5
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-6">
        <div class="wrap-col">
            col-1-6
        </div>
    </div>
    <div class="col-1-6">
        <div class="wrap-col">
            col-1-6
        </div>
    </div>
    <div class="col-1-6">
        <div class="wrap-col">
            col-1-6
        </div>
    </div>
    <div class="col-1-6">
        <div class="wrap-col">
            col-1-6
        </div>
    </div>
    <div class="col-1-6">
        <div class="wrap-col">
            col-1-6
        </div>
    </div>
    <div class="col-1-6">
        <div class="wrap-col">
            col-1-6
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-7">
        <div class="wrap-col">
            col-1-7
        </div>
    </div>
    <div class="col-1-7">
        <div class="wrap-col">
            col-1-7
        </div>
    </div>
    <div class="col-1-7">
        <div class="wrap-col">
            col-1-7
        </div>
    </div>
    <div class="col-1-7">
        <div class="wrap-col">
            col-1-7
        </div>
    </div>
    <div class="col-1-7">
        <div class="wrap-col">
            col-1-7
        </div>
    </div>
    <div class="col-1-7">
        <div class="wrap-col">
            col-1-7
        </div>
    </div>
    <div class="col-1-7">
        <div class="wrap-col">
            col-1-7
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-8">
        <div class="wrap-col">
            col-1-8
        </div>
    </div>
    <div class="col-1-8">
        <div class="wrap-col">
            col-1-8
        </div>
    </div>
    <div class="col-1-8">
        <div class="wrap-col">
            col-1-8
        </div>
    </div>
    <div class="col-1-8">
        <div class="wrap-col">
            col-1-8
        </div>
    </div>
    <div class="col-1-8">
        <div class="wrap-col">
            col-1-8
        </div>
    </div>
    <div class="col-1-8">
        <div class="wrap-col">
            col-1-8
        </div>
    </div>
    <div class="col-1-8">
        <div class="wrap-col">
            col-1-8
        </div>
    </div>
    <div class="col-1-8">
        <div class="wrap-col">
            col-1-8
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            col-1-9
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>
    <div class="col-1-10">
        <div class="wrap-col">
            col-1-10
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>
    <div class="col-1-11">
        <div class="wrap-col">
            col-1-11
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>

</section>

</article>

<article class="grid">

    <h2>12 栅格 非等分</h2>

    <section class="row">

        <div class="col-1-3">
            <div class="wrap-col">
                col-1-3
            </div>
        </div>
        <div class="col-2-3">
            <div class="wrap-col">
                col-2-3
            </div>
        </div>

    </section>

    <section class="row">

        <div class="col-2-3">
            <div class="wrap-col">
                col-2-3
            </div>
        </div>
        <div class="col-1-3">
            <div class="wrap-col">
                col-1-3
            </div>
        </div>

    </section>

    <section class="row">

        <div class="col-1-4">
            <div class="wrap-col">
                col-1-4
            </div>
        </div>
        <div class="col-3-4">
            <div class="wrap-col">
                col-3-4
            </div>
        </div>

    </section>

    <section class="row">

        <div class="col-3-4">
            <div class="wrap-col">
                col-3-4
            </div>
        </div>
        <div class="col-1-4">
            <div class="wrap-col">
                col-1-4
            </div>
        </div>

    </section>

    <section class="row">

        <div class="col-1-5">
            <div class="wrap-col">
                col-1-5
            </div>
        </div>
        <div class="col-2-5">
            <div class="wrap-col">
                col-2-5
            </div>
        </div>
        <div class="col-2-5">
            <div class="wrap-col">
                col-2-5
            </div>
        </div>

    </section>

</article>

<article class="grid">

    <h2>栅格 嵌套</h2>

    <section class="row">

        <div class="col-1-2">
            <div class="wrap-col">
                col-1-2
                <section class="row">
                    <div class="col-1-3">
                        <div class="wrap-col">
                            col-1-3
                        </div>
                    </div>
                    <div class="col-2-3">
                        <div class="wrap-col">
                            col-2-3
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="col-1-2">
            <div class="wrap-col">
                col-1-2
            </div>
        </div>

    </section>

</article>

<article class="grid">

<h2>栅格 偏移</h2>

<section class="row">

    <div class="col-1-4">
        <div class="wrap-col">
            C-1-4
        </div>
    </div>
    <div class="col-1-4">
        <div class="wrap-col">
            C-1-4
        </div>
    </div>
    <div class="col-1-4">
        <div class="wrap-col">
            C-1-4
        </div>
    </div>
    <div class="col-1-4">
        <div class="wrap-col">
            C-1-4
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-4 Los-1-4">
        <div class="wrap-col">
            C-1-4 L-1-4
        </div>
    </div>
    <div class="col-1-4 Ros-1-4">
        <div class="wrap-col">
            C-1-4 R-1-4
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-4">
        <div class="wrap-col">
            C-1-4
        </div>
    </div>
    <div class="col-1-4 Los-2-4">
        <div class="wrap-col">
            C-1-4 L-2-4
        </div>
    </div>

</section>


<section class="row">

    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>
    <div class="col-1-9">
        <div class="wrap-col">
            C-1-9
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-9 Los-2-9" id="a">
        <div class="wrap-col" id="b">
            C-1-9 L-2-9
        </div>
    </div>
    <div class="col-2-9 Los-3-9 Ros-1-9" id="c">
        <div class="wrap-col" id="d">
            C-1-9 L-3-9 R-1-9
        </div>
    </div>

</section>

<section class="row">

    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>
    <div class="col-1-12">
        <div class="wrap-col">
            col-1-12
        </div>
    </div>

</section>

<section class="row">

    <div class="col-2-12 Los-2-12 Ros-1-12">
        <div class="wrap-col">
            C-2-12 L-2-12
        </div>
    </div>
    <div class="col-4-12 Los-2-12 Ros-1-12">
        <div class="wrap-col">
            C-3-12 L-3-12 R-1-12
        </div>
    </div>

</section>

</article>


</body>

<!-- JS -->
<script type="text/javascript" src="../bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/less.js/dist/less-1.5.1.min.js"></script>
<script type="text/javascript" src="../bower_components/modernizr/modernizr.js"></script>
<script type="text/javascript" src="js/Bustling_Grid.js"></script>
<!-- JS -->
<script type="text/javascript">
</script>

</html>